import React from 'react';
import { connect } from 'dva';
import { Form, Input, Modal, InputNumber } from 'antd';

const FormItem = Form.Item;
const { TextArea } = Input;

@Form.create()
@connect(({ gmvConf, loading }) => ({
  gmvConf,
  loading: loading.models.gmvConf,
}))
class HandBatchEditForm extends React.Component {
  static defaultProps = {
    recordIds: [],
    modalVisible: false,
    handleOpt: () => {},
    handleModalVisible: () => {},
  };

  constructor(props) {
    super(props);
    this.formLayout = {
      labelCol: { span: 7 },
      wrapperCol: { span: 13 },
    };
  }

  componentDidMount() {}

  okHandle = () => {
    const { recordIds, form, handleOpt } = this.props;
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      form.resetFields();
      handleOpt({
        idList: recordIds,
        ...fieldsValue,
      });
    });
  };

  render() {
    const { modalVisible, handleModalVisible, recordIds, form, skuName } = this.props;
    return (
      <Modal
        destroyOnClose
        maskClosable={false}
        width={440}
        style={{ top: 20 }}
        bodyStyle={{ padding: '10px 40px' }}
        title="批量修改"
        visible={modalVisible}
        onCancel={() => handleModalVisible(false)}
        onOk={this.okHandle}
      >
        <div>
          <div style={{ padding: '10px 2px' }}>
            <span>
              {skuName}:共计<strong>{recordIds.length}</strong>条预测数据将会被修改
            </span>
          </div>
          <FormItem key="forecastSale" {...this.formLayout} label="新预测值">
            {form.getFieldDecorator('forecastSale', {
              rules: [{ required: true, message: '请输入新预测值' }],
            })(<InputNumber style={{ width: '100%' }} placeholder="请输入" precision={0} />)}
          </FormItem>

          <FormItem key="comments" {...this.formLayout} label="修改原因">
            {form.getFieldDecorator('comments', {
              rules: [{ required: true, message: '请输入修改原因' }],
            })(<TextArea placeholder="请输入" />)}
          </FormItem>
        </div>
      </Modal>
    );
  }
}

export default HandBatchEditForm;
